import BasicWidget from "./BasicWidget"

const _getWidgetProps = (widgetProps) => {
  return widgetProps || {
    label: "姓名",
    labelWidth: 80,
    field: "name",
    placeholder: "请输入姓名",
    colspan: 6,
    prefix: "",
    suffix: "",
    prefixIcon: "",
    suffixIcon: "",
    maxLength: 120,
    minLength: 0,
    clearable: true,
    readonly: false,
    disabled: false,
    required: false,
    rules: []
  }
}
const widgetPropDescribe = {
  label: {
    type: "input",
    name: "标题"
  },
  labelWidth: {
    type: "number",
    name: "标题宽度",
  },
  field: {
    type: "input",
    name: "字段名",
  },
  placeholder: {
    type: "input",
    name: "占位字符"
  },
  colspan: {
    type: "number",
    name: "栅格数",
    min: 1,
    max: 24
  },
  prefix: {
    type: "input",
    name: "前缀"
  },
  suffix: {
    type: "input",
    name: "后缀"
  },
  prefixIcon: {
    type: "input",
    name: "头部图标"
  },
  suffixIcon: {
    type: "input",
    name: "尾部图标"
  },
  maxLength: {
    type: "number",
    name: "最多字数"
  },
  minLength: {
    type: "number",
    name: "最少字数"
  },
  clearable: {
    type: "switch",
    name: "是否可清空"
  },
  readonly: {
    type: "switch",
    name: "是否可清空"
  },
  disabled: {
    type: "switch",
    name: "是否禁用"
  },
  required: {
    type: "switch",
    name: "是否必填"
  },
  rules: {
    type: "rules",
    name: "正则验证"
  }
}

// Input 输入框
export default class Input extends BasicWidget {
  constructor(widgetProps) {
    super(_getWidgetProps(widgetProps), widgetPropDescribe);
    // 组件的标签
    this.tag = "el-input";
    this.key = Symbol(this.tag);
    // 组件默认值
    this.defaultValue = "";
  }
  /**
   * 生成组件的 html 代码
   * @param {number} index 当前组件在 selectedWidgets 里的索引
   * @returns 
   */
  createWidgetHtml(index, editting, parentId) {
    this.index = index;
    this.parentId = parentId;
    const {
      label,
      labelWidth,
      required,
      field,
      placeholder,
      colspan,
      prefixIcon,
      suffixIcon,
      clearable,
      disabled,
      readonly,
      maxLength,
      minLength,
      prefix,
      suffix
    } = this.widgetProps
    return (
      editting ?
      `<el-col :span=${colspan}
        id=${this.id}
        data-parentid=${parentId || "ultrame-canvas"}
        data-idx=${index}
        class="ultrame-form-item-box"
        data-action="move"
        draggable="true">
        <span
          class="${required ? 'required' : ''} label"
          style="width: ${labelWidth}px;">
          ${label}
        </span>
        <div class="inputContainer">
          <${this.tag}
            v-model="${field}"
            placeholder="${placeholder}"
            prefix-icon="${prefixIcon}"
            suffix-icon="${suffixIcon}"
            maxLength="${maxLength}"
            minLength="${minLength}"
            :clearable=${clearable}
            :disabled="${disabled}"
            :readonly="${readonly}">
            ${
              prefix && "<template slot='prepend'>" + prefix + "</template>"
            }
            ${
              suffix && "<template slot='append'>" + suffix + "</template>"
            }
          </${this.tag}>
        </div>
      </el-col>` :
      `<el-col :span=${colspan}>
        ${this.createPureWidgetHtml()}
      </el-col>`
    )
  }
  createPureWidgetHtml() {
    const {
      label,
      labelWidth,
      required,
      field,
      placeholder,
      prefixIcon,
      suffixIcon,
      clearable,
      disabled,
      readonly,
      maxLength,
      minLength,
      prefix,
      suffix
    } = this.widgetProps
    return (
      `<el-form-item
      label="${label}"
      label-width="${labelWidth}px"
      prop="${field}"
      :required="${required}">
        <${this.tag} 
          v-model="formData.${field}"
          placeholder="${placeholder}"
          prefix-icon="${prefixIcon}"
          suffix-icon="${suffixIcon}"
          maxLength="${maxLength}"
          minLength="${minLength}"
          :clearable=${clearable}
          :disabled="${disabled}"
          :readonly="${readonly}">
          ${
            prefix && "<template slot='prepend'>" + prefix + "</template>"
          }
          ${
            suffix && "<template slot='append'>" + suffix + "</template>"
          }
        </${this.tag}>
      </el-form-item>`
    )
  }
}